<template>
    <div class="roleList">
        <div class="toolBar">
            <el-input placeholder="输入关键字名回车" v-model="keyword"
                @keydown.enter="pageNum = 1; pageSize = 10; getRoleList()"
                @clear="pageNum = 1; pageSize = 10; getRoleList()" style="width:300px;" clearable prefix-icon="Search">
            </el-input>
            <el-button style="margin-left:10px;" type="primary" @click="isAdd=true;role={};showRoleInfo=true;" icon="Plus">添加角色</el-button>
            <el-button @click="removeRole" style="margin-left:10px" type="danger" icon="Delete">删除角色</el-button>
        </div>
        <el-table header-row-class-name="tableHeader" border stripe highlight-current-row :data="tableData" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="roleName" label="角色名称"/>
            <el-table-column prop="roleCode" label="角色代码"/>
            <el-table-column align="center" prop="createTime" label="创建时间" width="200"/>
            <el-table-column align="center" prop="createTime" label="设置"  width="120">
                <template #default="scope">
                    <el-button @click="setting(scope.row)" icon="Setting" round type="info" size="small">设置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @current-change="goPage" hide-on-single-page small background layout="prev, pager, next" :total="total" />
        </div>
        <el-dialog title="角色信息" v-model="showRoleInfo">
            <el-form :model="role">
                <el-form-item label="角色名称">
                    <el-input placeholder="输入角色名称" v-model="role.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色代码">
                    <el-input placeholder="输入角代码" v-model="role.roleCode"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" @click="showRoleInfo=false">取消</el-button>
                    <el-button @click="saveOrUpdate" type="primary">{{isAdd?'添加':'修改'}}</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {roleList,addRole,setRole,delRole} from '../../js/api.js'
import { ElTable,ElMessage,ElMessageBox } from 'element-plus'
export default {
    components: {
        ElTable
    },
    data() {
        return {
            isAdd: true,
            keyword: '',
            tableData: [],
            role:{},
            showRoleInfo: false,
            selectedIds:[],
            total: 0,
            pageNum: 1,
            pageSize: 10
        }
    },
    methods:{
        getRoleList(){
            roleList({pageNum:this.pageNum,pageSize:this.pageSize,keyword:this.keyword}).then(res=>{
                if(!res.status){
                    ElMessage({type:'error',message:res.msg});
                    return;
                }
                this.tableData = res.data.list;
                this.total = res.data.total;
                this.pageNum = 1;
            })
        },
        goPage(currentPageNum){
            this.pageNum = currentPageNum;
            this.getRoleList();
        },
        setting(role){
            this.role = role;
            this.isAdd = false;
            this.showRoleInfo = true;
        },
        saveOrUpdate(type){
            if(this.isAdd){
                addRole(this.role).then(res=>{
                    ElMessage({type:res.status?'success':'error',message:res.msg});
                    if(res.status) this.getRoleList();
                })
            }else{
                setRole(this.role).then(res=>{
                    ElMessage({type:res.status?'success':'error',message:res.msg});
                    if(res.status) this.getRoleList();
                })   
            }
            this.showRoleInfo = false;
        },
        handleSelectionChange(val){
            this.selectedIds = [];
            val.forEach(element => {
                this.selectedIds.push(element.id);
            });
        },
        removeRole(){
            if(this.selectedIds.length==0){
                ElMessage({type:'warning',message:'请先选择要删除的角色'})
                return;
            }
            ElMessageBox.confirm('该操作将删除选中的角色信息，是否继续？','提示',{confirmButtonText:'确定',cancelButtonText:'取消'}).then(()=>{
                delRole(this.selectedIds).then(res=>{
                    ElMessage({type:res.status?'success':'error',message:res.msg})
                    if(res.status) this.getRoleList();
                })
            })
        }
    },
    mounted(){
        this.getRoleList();
    }
}
</script>
<style scoped>
/* .el-table>>> .tableHeader th{
    background-color: #909399;
    color: white;
    border-color: gray;
} */
</style>